<template>
    <div>
        <!-- <article class="wrapper" v-bind:class="{greyBgColor:(curActive !== 'all' || loading === true)}"> -->


        <!-- 头部 -->
        <header id='header'>
            <div id='header-box'>
                <a class='search' id='search-link'>
                    <svg class='expand' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
                        <path
                            d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/>
                        <path d='M0 0h24v24H0z' fill='none'/>
                    </svg>
                    <svg class='collapse' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
                        <path
                            d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/>
                        <path d='M0 0h24v24H0z' fill='none'/>
                    </svg>
                </a>

                <div id='search'>
                    <input type='text' id='search-input-pike-blog' placeholder='输入关键词'/>
                    <ul id='search-results'></ul>
                </div>

                <a href='#' class='language'>EN</a>
                <div class="wrapper">
                    <a class="starbucks" id="website-header-logo" href='/'><img src="/static/favicons/favicon.png"/></a>
                    <!--<div class="line"></div>-->
                    <a class='home' id="blog-home-header-logo" href='#'></a>
                </div>
                <div id='progress'></div>
            </div>
        </header>


        <section id='content'>


            <header class='hero'>
                <span class="tag_ad">广告</span>
                <div class='cover parallax'
                     style='background-image: url("https://www.starbucks.com.cn/coffee-blog/images/coffee-cultivation-kv.jpg");'></div>
            </header>

            <section class='wrapper'>
                <header class='header'>
                    <h1>
                        车衣的作用
                    </h1>
                    <p>
                        XPEL隐形车衣有哪些作用
                    </p>
                    <section class='meta'>
                        <!-- <time datetime='2017-08-07 00:00:00 +0800'>

                          2017-08-07

                        </time> -->
                    </section>
                </header>
                <section class="breadcrumb">
                    <a href="/" class="breadcrumb-link" id="blog-home-breadcrumb">首页</a>
                    <svg class="nav-search-button-glyph" width="13px" height="25px" viewBox="14 1 27 26" version="1.1">
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                           sketch:type="MSPage">
                            <g id="Line-+-Line-+-Line-Copy" sketch:type="MSLayerGroup" stroke="#897A6C" stroke-width="3"
                               stroke-linecap="round">
                                <path stroke="#2f2f2f" class="nav-search-button-path" d="M15,1 L27,13" id="Line"
                                      sketch:type="MSShapeGroup"></path>
                                <path stroke="#2f2f2f" class="nav-search-button-path"
                                      d="M14.8878434,13.1064688 L26.8878434,25.1064688" id="Line-Copy"
                                      sketch:type="MSShapeGroup"
                                      transform="translate(20.887843, 19.106469) rotate(-90.000000) translate(-20.887843, -19.106469) "></path>
                            </g>
                        </g>
                    </svg>
                    <a href="/coffee-blog/categories/coffee-knowledge" class="breadcrumb-link"
                       id="blog-category-breadcrumb">车衣的作用</a>
                    <svg class="nav-search-button-glyph" width="13px" height="25px" viewBox="14 1 27 26" version="1.1">
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                           sketch:type="MSPage">
                            <g id="Line-+-Line-+-Line-Copy" sketch:type="MSLayerGroup" stroke="#897A6C" stroke-width="3"
                               stroke-linecap="round">
                                <path stroke="#2f2f2f" class="nav-search-button-path" d="M15,1 L27,13" id="Line"
                                      sketch:type="MSShapeGroup"></path>
                                <path stroke="#2f2f2f" class="nav-search-button-path"
                                      d="M14.8878434,13.1064688 L26.8878434,25.1064688" id="Line-Copy"
                                      sketch:type="MSShapeGroup"
                                      transform="translate(20.887843, 19.106469) rotate(-90.000000) translate(-20.887843, -19.106469) "></path>
                            </g>
                        </g>
                    </svg>
                    <span class="breadcrumb-span">XPEL隐形车衣有哪些作用</span>
                </section>
                <section class='body'>

                    <p>隐形车衣是一种热塑性聚氨脂薄膜（TPU），含抗UV聚合物，抗黄变，具有超强的韧性，耐磨性不变黄、易粘贴，抗碰撞刮蹭，装贴后可使汽车漆面与空气隔绝，防酸雨、防氧化、抵抗划伤，持久保护汽车的漆面。</p>

                    <p>1、避免车漆被划伤：极膜隐形车衣能够立即维护故意划伤车漆。由于隐形车衣是加厚型材料，一切正常锁匙故意划车的力度是不容易划透极膜隐形车衣的，极膜隐形车衣是您靓车漆面的最终安全防护。</p>

                    <p>
                        2、划伤后能自修复：由于隐形车衣自身有很强的柔韧性，以及自修复特性，在被轻度剐蹭时，在阳光照射下，能够自动修复微小痕迹。严重一点的还可以根据加温来修补，但是前提条件是隐形车衣镀层没有被透过。
                    <p>
                        3、提亮车身：隐形车衣自身具有一定的光泽度和清晰度，贴了保护膜不但不会减少车体光泽度，还可以提升车漆光泽度，降低今后车漆维护保养的花费，让你的车子长期明亮如新。
                    </p>
                    <p>4、防晒功能：隐形车衣自身具有抗紫外光层，能够防止紫外线对车漆的损害，让你的爱车几年之内都能保持和出厂时一样，亮丽如新。</p>
                    <p>5、防护一切危害：平时电脑洗车，树胶虫胶，酸雨，扬尘，雨天飞溅的污水，髙速溅出的碎石子。漆面封釉，镀晶镀膜等化工类安全防护商品只有提升一点漆面强度，只能暂时抵挡紫外光、酸雨，扬尘的危害、如果是高速公路碎石、故意刮伤等损害，必须由隐形车衣这类彻底的物理学阻隔方式做最终安全防护。</p>
                    <p>6、隔热环保：由于隐形车衣是物理学保护层厚度，高温具有一定的隔绝功效，让厚钢板传输的发热量稍有减少，另外内部中央空调冷气也会更强封闭在车里避免向外传输，具有隔热保温省油的功效，除了隔热，也能隔断外面冷空气，维持车里暧风温度都是一样的道理。</p>

                    <p><img src="/static/images/pages/article_1.png" alt=""/></p>

                </section>
            </section>

            <footer class='footer'>

            </footer>
        </section>




        <!-- 底部版权 -->
        <footer id='footer'>
            <div class='wrapper'>

                <ul class='links'>
                    <li class='organization' itemscope='' itemtype='#'><a href="/" id="website-footer-text"
                                                                          target='_blank'><span
                        itemprop='name'>XPEL官网</span></a></li>
                </ul>

                <ul class='legal'>
                    <li><a href="#" target='_blank'>隐私政策</a></li>
                    <li><a href="#" target='_blank'>条款和条件</a></li>
                </ul>

            </div>
        </footer>


        <!-- </article> -->
    </div>
</template>
<style scoped>
    @import '../../assets/css/article.css'
</style>
<script>
    import NavContainer from '@/components/navContainer'
    import NavOverlay from '@/components/NavOverlay'
    import NavMobile from '@/components/navMobile'
    import axios from 'axios'


    export default {
        name: 'menuFood',
        metaInfo: {
            title: '美食',
            titleTemplate: '%s | XPEL',
            meta: [
                {
                    name: 'keywords',
                    content: ''
                },
                {
                    name: 'description',
                    content: '探索星巴克美食。'
                }
            ]
        },
        data(){
            return {
                show_menu_bol: false,
                lgMedia: window.matchMedia('(min-width: 1025px)').matches,
                loading: false,
                foodSortItems: {},
                storage: null,
                curActive: 'all',
                menuNavFilter: [
                    {
                        menuEN: 'baking',
                        menuCN: '烘焙'
                    },
                    {
                        menuEN: 'dessert',
                        menuCN: '蛋糕&甜品'
                    },
                    {
                        menuEN: 'sandwich',
                        menuCN: '三明治、帕尼尼、卷'
                    },
                    {
                        menuEN: 'yogurt',
                        menuCN: '酸奶'
                    },
                    {
                        menuEN: 'other',
                        menuCN: '其他美食'
                    }
                ]
            }
        },
        mounted(){
            const _self = this;
            window.matchMedia('(min-width: 1025px)').addListener(() => {
                _self.lgMedia = window.matchMedia('(min-width: 1025px)').matches;
            });
            this.init();
            this.trackingVisitor();
        },
        components: {
            NavContainer: NavContainer,
            NavOverlay: NavOverlay,
            NavMobile: NavMobile
        },
        methods: {
            init(){
                this.storage = window.sessionStorage || null;
                let storage = this.storage;
                if (storage && storage.foodSortItems && storage.foodSortItems !== []) {
                    this.foodSortItems = this.getStorageItems({
                        storage: storage,
                        itemName: 'foodSortItems'
                    });
                } else {
                    this.getFoodItems();
                }
            },
            showMenuExec(){
                this.show_menu_bol = true;
            },
            closeMenuExec(){
                this.show_menu_bol = false;
            },
            pageRedir(item){
                this.$store.commit('pageRedir', item);
            },
            getFoodItems(){
                this.loading = true;

                axios.get("/food/items").then((res) => {
                    let data = res.data,
                        storage = this.storage;

                    if (data.status == '1') {
                        console.log("Data request failed!");
                        return;
                    }

                    this.foodSortItems = this.sortItems(data.result.data);
                    this.loading = false;

                    if (storage) {
                        this.setStorageItems({
                            storage: storage,
                            itemName: 'foodSortItems',
                            data: this.foodSortItems
                        });
                    }
                });
            },
            sortItems(productItems){
                let tempStr = '',
                    tempObj = {},
                    subTypes = [],
                    key = '', len = '';
                productItems.map((item) => {
                    if (item.SubTypes !== tempStr) {
                        tempStr = item.SubTypes;
                        subTypes.push(tempStr);
                        len = subTypes.length;
                        key = subTypes[len - 1];
                        tempObj[key] = [];
                    }
                    tempObj[key].push(item);
                });
                return tempObj;
            },
            setStorageItems(options){
                let storage = options.storage,
                    itemName = options.itemName,
                    json = options.data;
                storage.setItem(itemName, JSON.stringify(json));
            },
            getStorageItems(options){
                let storage = options.storage,
                    itemName = options.itemName,
                    json = storage.getItem(itemName);
                return JSON.parse(json);
            },
            getCurMenuList(index){
                let key = this.menuNavFilter[index].menuEN;
                let list = this.foodSortItems[key];
                if (list !== []) {
                    this.$store.curMenuList = list;
                    return true;
                } else {
                    return false;
                }
            },
            isNotLastItem(index){
                if (this.curActive == 'all') {
                    return index !== this.menuNavFilter.length - 1;
                } else {
                    return false;
                }
            },
            menuFilter(index){
                if (this.curActive == 'all') {
                    return true;
                } else {
                    return this.curActive == index;
                }
            },
            trackingVisitor() {
                let storage = window.sessionStorage || null;
                if (storage) {
                    let VisitorID = storage.getItem('VisitorID'),
                        page = '菜单-食品';
                    if (!VisitorID) return;
                    axios.post('users/tracking', {
                        visitorID: VisitorID,
                        page: page
                    })
                }

            }
        }
    }

</script>



